<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
  <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
  <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
  <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
  <meta name="author" content="ajiho">
  <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../lib/bootstrap-table/dist/bootstrap-table.min.css">
  <link rel="stylesheet" href="../lib/@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css"/>
  <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
  <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
  <div class="card border-0 shadow-sm">
    <div class="card-header bg-body py-3">
      <form class="row row-cols-sm-auto g-3 align-items-center" action="#">
        <div class="col-12">
          <div class="row">
            <label for="name" class="col-sm-auto col-form-label">角色名称</label>
            <div class="col">
              <input type="text" class="form-control" id="name" name="name">
            </div>
          </div>
        </div>

        <div class="col-12 gap-2">

          <button type="button" class="btn btn-light bsa-querySearch-btn">
            <i class="bi bi-search"></i>搜索
          </button>
          <button type="button" class="btn btn-light bsa-reset-btn">
            <i class="bi bi-arrow-clockwise"></i>重置
          </button>
        </div>

      </form>
    </div>

    <div class="card-body">
      <table id="table"></table>

    </div>
    <div class="card-footer bg-body">
      <button class="btn btn-light btn-submit">确定</button>
    </div>
  </div>
</div>
<!--回到顶部开始-->
<a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->


<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="../lib/@eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js"></script>
<script src="../lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="../lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>
<!--假数据模拟,生产环境中请直接删除该js-->
<script src="../dist/js/bootstrap-admin.mock.js"></script>

<script>
  $(function () {


    //授权按钮
    $('.btn-submit').on('click', function () {
      //获取选中的行
      let rowSelected = $("#table").bootstrapTable('getSelections');
      //判断是否有勾选
      if (rowSelected.length === 0) {
        $.toasts({
          type: 'danger',
          content: '请选择需要授权的角色',
        })
        return false;
      }

      // 得到id
      let id = rowSelected[0].id;

      $.ajax({
        url: `/user/role/${id}`,
        method: 'post',
      }).then(response => {
        if (response.code === 200) {
          $.toasts({
            type: 'success',
            content: '分配成功',
            delay: 1000,
            autohide: true,
            onHidden: function () {
              parent.rolemodal.setData(true);
              parent.rolemodal.close();
            }
          })
        }
      });


    })


    $('#table').bootstrapTable({
      //配置语言
      locale: 'zh-CN',
      //设置高度，就可以固定表头
      // height: 500,
      //请求地址
      url: '/role',
      responseHandler: function (res) {
        return res.data;
      },
      //加载模板,不改的话，默认的会超出不好看
      loadingTemplate: function () {
        return '<div class="spinner-grow" role="status"><span class="visually-hidden">Loading...</span></div>';
      },
      //头部的复选框是否显示
      checkboxHeader: false,
      //是否单选
      singleSelect: true,
      //是否开启分页
      pagination: true,
      //是客户端分页还是服务端分页  'client','server',由于演示没有后端提供服务，所以采用前端分页演示
      sidePagination: 'client',
      // 初始化加载第一页，默认第一页
      pageNumber: 1,
      //默认显示几条
      pageSize: 5,
      //可供选择的每页的行数 - (亲测大于1000存在渲染问题)
      pageList: [5, 10, 25, 50, 100],
      //在上百页的情况下体验较好 - 能够显示首尾页
      paginationLoop: true,
      // 展示首尾页的最小页数
      paginationPagesBySide: 2,

      // 唯一ID字段
      uniqueId: 'id',
      // 每行的唯一标识字段
      idField: 'id',
      // 是否启用点击选中行
      clickToSelect: true,
      // 是否显示详细视图和列表视图的切换按钮
      showToggle: true,
      // 请求得到的数据类型
      dataType: 'json',
      // 请求方法
      method: 'get',
      // 是否显示所有的列
      showColumns: true,
      // 是否显示刷新按钮
      showRefresh: true,
      // 显示图标
      showButtonIcons: true,
      // 显示文本
      showButtonText: false,
      // 显示全屏
      showFullscreen: false,
      // 开关控制分页
      showPaginationSwitch: false,
      // 总数字段
      totalField: 'total',
      // 当字段为 undefined 显示
      undefinedText: '-',
      // 排序方式
      sortOrder: "asc",
      // 按钮的类
      buttonsClass: 'light',
      // 类名前缀
      buttonsPrefix: 'btn',

      // 图标前缀
      iconsPrefix: 'bi',
      // 图标大小 undefined sm lg
      iconSize: undefined,
      // 图标的设置  这里只做了一个演示，可设置项目参考 https://examples.bootstrap-table.com/#options/table-icons.html
      icons: {
        fullscreen: 'bi-arrows-fullscreen',
      },
      onPostBody: function () {
        //重新启用弹出层,否则formatter格式化函数返回的html字符串上的tooltip提示不生效
        $('[data-bs-toggle="tooltip"]').each(function (i, el) {
          new bootstrap.Tooltip(el)
        })
      },
      //params是一个对象
      queryParams: function (params) {
        return {
          // 每页数据量
          limit: params.limit,
          // sql语句起始索引
          offset: params.offset,
          page: (params.offset / params.limit) + 1,
          // 排序的列名
          sort: params.sort,
          // 排序方式 'asc' 'desc'
          sortOrder: params.order,
          //关键词
          keywords: $('input[name=keyword]').val(),
          //开始时间
          beginTime: $('#beginTime').val(),
          //结束时间
          endTime: $('#endTime').val(),
        }
      },
      //列
      columns: [
        {
          checkbox: true,
          //是否显示该列
          visible: true,
          formatter: function (value, row, index) {
            let _checked = false;       //默认不选中
            if (row.id === 3) {   //满足条件，设置选中
              _checked = true;
            }
            return {
              checked: _checked
            }
          }
        },
        {
          title: 'ID',
          field: 'id',
          // 使用[align]，[halign]和[valign]选项来设置列和它们的标题的对齐方式。h表示横向，v标识垂直
          align: 'center',
          // 是否作为排序列
          sortable: true,
          // 当列名称与实际名称不一致时可用
          sortName: 'sortId',
          switchable: false,
          // 列的宽度
          width: 8,
          // 宽度单位
          widthUnit: 'rem'
        },
        {
          title: '角色名称',
          field: 'name',
          align: 'center'
        },
        {
          title: '加入时间',
          field: 'create_at',
          align: 'center',
        }
      ]
    });


    //搜索处理
    $('.bsa-querySearch-btn').on('click', function () {
      $('#table').bootstrapTable('refresh');
      $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
    })

    //重置处理
    $('.bsa-reset-btn').on('click', function () {

      //把所有的字段都恢复默认值
      $('#name').val('');
      //刷新回到第一页
      $('#table').bootstrapTable('refresh');
      $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
    })

  });


</script>

</body>
</html>
